<template>
  <div class="dd-container">
    <div class="step-container">
      <el-steps :active="stepStatus" align-center>
        <el-step title="获得企业授权">
          <template v-slot:icon>
            <img src="../../assets/images/step1.png" alt="">
          </template>
        </el-step>
        <el-step title="企业签署授权书">
          <template v-slot:icon>
            <img src="../../assets/images/step2.png" alt="">
          </template>
        </el-step>
        <el-step title="授权书审核">
          <template v-slot:icon>
            <img src="../../assets/images/step3.png" alt="">
          </template>
        </el-step>
        <el-step title="查看报告">
          <template v-slot:icon>
            <img src="../../assets/images/step4.png" alt="">
          </template>
        </el-step>
      </el-steps>
    </div>
    <div class="content">
      <h3>【<span>企业用电分析报告</span>】须获得企业授权，方可查看</h3>
      <!-- <div class="time">
          <div>授权倒计时：<strong v-html="bgDays"></strong> 天 <strong v-html="bgHours"></strong> 时 <strong
              v-html="bgMinutes"></strong> 分 <strong v-html="bgSeconds"></strong> 秒</div>
        </div> -->
      <div class="auth">
        <el-checkbox v-model="checked1" size="large" />
        <span class="cb">我已阅读并同意<router-link to="/mzsm">《免责声明》</router-link>和<router-link to="/xxsq">《信息授权》</router-link></span>
      </div>
      <div class="btns">
        <el-button size="large" class="btn" @click="onBack">取消查看</el-button>
        <el-button :disabled="!checked1" size="large" class="btn" type="primary" @click="onAuthClick">获取授权</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from "vue"
import { useRouter } from "vue-router"
import { useDueDiligenceStore } from '../../stores/modules/DueDiligence'
import { useAuthStore } from "../../stores/modules/Auth"

const dueDiligenceStore = useDueDiligenceStore()
const authStore = useAuthStore()
const router = useRouter()
const checked1 = ref(false)
const stepStatus = ref(1)
const targetDate = ref(new Date("2024-07-01"))
const days = ref(0)
const hours = ref(0)
const minutes = ref(0)
const seconds = ref(0)

/**
 * 计时器
 */
const updateTimer = () => {
  // 获取当前时间
  const now = new Date();
  let timeDiff = targetDate.value.getTime() - now.getTime();
  days.value = Math.floor(timeDiff / (1000 * 60 * 60 * 24)) >= 10 ? Math.floor(timeDiff / (1000 * 60 * 60 * 24)) : '0' + Math.floor(timeDiff / (1000 * 60 * 60 * 24));
  timeDiff -= days.value * (1000 * 60 * 60 * 24);
  hours.value = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) >= 10 ? Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) : '0' + Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  timeDiff -= hours.value * (1000 * 60 * 60);
  minutes.value = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60)) >= 10 ? Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60)) : '0' + Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
  timeDiff -= minutes.value * (1000 * 60);
  seconds.value = Math.floor((timeDiff % (1000 * 60)) / 1000) >= 10 ? Math.floor((timeDiff % (1000 * 60)) / 1000) : '0' + Math.floor((timeDiff % (1000 * 60)) / 1000);
}

onMounted(() => {
  // 每秒钟更新一次计时器
  setInterval(updateTimer, 1000);
})

const bgDays = computed(() => {
  let currentDays = days.value.toString().split("")
  let currentHTML = ""
  for (let i = 0; i < currentDays.length; i++) {
    currentHTML += "<span class='time-bg'>" + currentDays[i] + "</span>"
  }
  return currentHTML
})

const bgHours = computed(() => {
  let currentHours = hours.value.toString().split("")
  let currentHTML = ""
  for (let i = 0; i < currentHours.length; i++) {
    currentHTML += "<span class='time-bg'>" + currentHours[i] + "</span>"
  }
  return currentHTML
})

const bgMinutes = computed(() => {
  let currentMinutes = minutes.value.toString().split("")
  let currentHTML = ""
  for (let i = 0; i < currentMinutes.length; i++) {
    currentHTML += "<span class='time-bg'>" + currentMinutes[i] + "</span>"
  }
  return currentHTML
})

const bgSeconds = computed(() => {
  let currentSeconds = seconds.value.toString().split("")
  let currentHTML = ""
  for (let i = 0; i < currentSeconds.length; i++) {
    currentHTML += "<span class='time-bg'>" + currentSeconds[i] + "</span>"
  }
  return currentHTML
})

const onBack = () => {
  // router.push(`/DDReportCheck/4/preview`)
  history.back()
}

const onAuthClick = () => {

}

</script>
<style lang="less" scoped>
.dd-container {
  background: #fff;
  height: calc(100vh - 80px);
}

.step-container {
  padding: 100px 200px;
}

.content {
  text-align: center;
  padding-bottom: 100px;

  h3 {
    font-weight: 500;
    font-size: 32px;
    color: #000000;

    span {
      color: #FF0000;
    }
  }

  .time {
    margin: 40px 0;
    font-weight: 500;
    font-size: 32px;
    color: #FF1D1D;

    :deep(.time-bg) {
      display: inline-block;
      width: 25px;
      margin: 0 3px;
      color: #fff;
      background: #373737;
      border-radius: 5px;
      font-size: 28px;
      box-shadow: 3px 7px 10px rgba(0, 0, 0, 0.2);
    }
  }

  .auth {
    margin-top: 30px;

    .cb {
      font-size: 14px;
      display: inline-block;
      line-height: 1;
      padding-left: 8px;
      color: #666;
    }
  }

  .btns {
    display: flex;
    justify-content: center;

    .btn {
      margin: 30px 50px;
    }
  }
}
</style>